<template>
    <div class="game-all-data-box" v-loading="loading">
        <div class="input-box">
            <span class="input-title" style="margin-left:0px;">日期</span>
            <el-date-picker
                @change="getList"
                v-model="date"
                :clearable="false"
                type="daterange"
                style="width:300px;"
                value-format="yyyy-MM-dd"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :picker-options="pickerOptions">
            </el-date-picker>

            <span class="input-title">维度</span>
            <el-select
                @change="getList"
                style="width:130px;"
                v-model="status">
                <el-option label="新用户留存" :value="1"></el-option>
                <el-option label="活跃用户留存" :value="2"></el-option>
            </el-select>
            <span class="input-title">渠道</span>
            <el-select @change="getList" filterable style="width:150px;" popper-class="input-seclect" v-model="channel">
                <el-option label="全部" :value="null"></el-option>
                <el-option v-for="(item, index) in fromList" :key="index" :label="item.desc" :value="item.channel"></el-option>
            </el-select>
            <el-button type="primary" class="btn" @click="getList">搜索</el-button>
        </div>
        <div class="table-box">
            <div class="table-title-box">
                <div class="table-title"></div>
                <div class="table-title" v-if="status === 1">新增用户</div>
                <div class="table-title" v-else>活跃用户</div>
                <div class="table-title">1天后</div>
                <div class="table-title">2天后</div>
                <div class="table-title">3天后</div>
                <div class="table-title">4天后</div>
                <div class="table-title">5天后</div>
                <div class="table-title">6天后</div>
                <div class="table-title">7天后</div>
                <div class="table-title">14天后</div>
                <div class="table-title">30天后</div>
            </div>

            <div class="table-content-box">
                <div class="table-content">汇总数据</div>
                <div class="table-content" v-for="(_item, _index) in totalData" :key="_index">
                    <span>{{_item.count}}</span>
                    <span v-if="_index !== 0"> / </span>
                    <span v-if="_index !== 0">{{_item.scale | percent}}</span>
                </div>
            </div>
        </div>

        <div class="table-box">
            <div class="table-title-box">
                <div class="table-title">时间</div>
                <div class="table-title" v-if="status === 1">新增用户</div>
                <div class="table-title" v-else>活跃用户</div>
                <div class="table-title">1天后</div>
                <div class="table-title">2天后</div>
                <div class="table-title">3天后</div>
                <div class="table-title">4天后</div>
                <div class="table-title">5天后</div>
                <div class="table-title">6天后</div>
                <div class="table-title">7天后</div>
                <div class="table-title">14天后</div>
                <div class="table-title">30天后</div>
            </div>

            <div class="table-content-box" v-for="(item, index) in list" :key="index">
                <div class="table-content table-btn" @click="goChannelRetained(item.date, index)">{{item.date | timeInit}}</div>
                <div class="table-content" v-for="(_item, _index) in item.userKeepOneDataVoList" :key="_index">
                    <span>{{_item.count}}</span>
                    <span v-if="_index !== 0"> / </span>
                    <span v-if="_index !== 0">{{_item.scale | percent}}</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { formatDate } from '@/utils/utils'
export default {
    data () {
        return {
            loading: false,
            list: [
            ],
            total: 0,
            channel: null,
            fromList: [],
            pickerOptions: {
                // disabledDate (time) {
                //     return time.getTime() > (new Date().getTime() - 3600 * 1000 * 24)
                // }
            },
            status: 1,
            date: [], // 时间
            totalData: [], // 汇总数据
            queryParams: '{}'
        }
    },
    created () {
        this.status = Number(window.localStorage.getItem('_userDataWeidu')) || 1
        let start = formatDate(new Date().getTime() - 3600 * 1000 * 24 * 14, 'YYYY-MM-DD')
        let end = formatDate(new Date() - 3600 * 1000 * 24, 'YYYY-MM-DD')
        this.date = [start, end]
        this.getList()
        this.getFromList()
    },

    watch: {
        status (val) {
            window.localStorage.setItem('_userDataWeidu', val)
        }
    },

    methods: {
        // 去往渠道留存数据
        goChannelRetained(queryDate, index) {
            const { href } = this.$router.resolve({
                path: '/dataReport/channelRetained',
                query: {
                    queryDate: formatDate(queryDate, 'YYYY-MM-DD'),
                    status: this.status,
                    clickIndex: index,
                    queryParams: this.queryParams
                }
            })
            window.open(href, '_blank')
        },
        // 获取数据
        async getList () {
            if (this.loading) return
            this.loading = true

            let params = {
                pageNum: 1,
                pageSize: 9999999,
                status: this.status,
                channel: this.channel
            }


            if (this.date && this.date.length) {
                params.startTime = this.date[0]
                params.endTime = this.date[1]
            }
            this.queryParams = JSON.stringify(params || {})
            let res = await this.$http.get('/data/selectUserKeep', {
                params
            })
            if (res.code === '0') {
                this.list = res.data || []
                this.total = res.count
                this.getTotalData()
            } else {
                this.$message({
                    type: 'error',
                    message: res.desc
                })
            }
            this.loading = false
        },

        // 获取渠道数据
        async getFromList () {
            let res = await this.$http.get('/apkManage/getChannel')
            if (res.code === '0') {
                res.data = res.data || []
                this.fromList = res.data.reverse()
            } else {
                this.$message({
                    type: 'error',
                    message: res.desc
                })
            }
        },

        // 计算汇总数据
        getTotalData () {
            this.totalDataInit()
            this.list.forEach(item => {
                let { userKeepOneDataVoList } = item
                userKeepOneDataVoList.forEach((_item, _index) => {
                    this.totalData[_index].count += _item.count
                    this.totalData[_index]._num++
                })
            })
            this.totalData = this.totalData.filter((item, index) => {
                item.count = parseInt(item.count / item._num) || 0
                if (index === 0) {
                    this.totalStartData = item.count
                } else {
                    item.scale = item.count / this.totalStartData
                }
                return item._num
            })
        },

        totalDataInit () {
            this.totalData = [
                { count: 0, scale: 0, _num: 0 },
                { count: 0, scale: 0, _num: 0 },
                { count: 0, scale: 0, _num: 0 },
                { count: 0, scale: 0, _num: 0 },
                { count: 0, scale: 0, _num: 0 },
                { count: 0, scale: 0, _num: 0 },
                { count: 0, scale: 0, _num: 0 },
                { count: 0, scale: 0, _num: 0 },
                { count: 0, scale: 0, _num: 0 },
                { count: 0, scale: 0, _num: 0 }
            ]
        }
    },

    filters: {
        timeInit (val) {
            if (val) {
                return formatDate(val, 'YYYY-MM-DD')
            } else {
                return '-'
            }
        },

        percent (val) {
            if (val) {
                return parseInt(val * 1000) / 10 + '%'
            } else {
                return '0%'
            }
        }
    }
}
</script>

<style lang="scss" scoped>
    .game-all-data-box {
        .input-box {
            margin-top: 10px;
            font-size: 13px;
            font-weight: 500;
            .input-title {
                margin: 0 10px 0 20px;
            }
            .btn {
                margin-left: 20px;
            }
        }
        .table-box {
            margin: 20px 0;
            border: 1px #EEE solid;
            .table-title-box {
                width: 100%;
                display: flex;
                align-items: center;
                background: #fafafa;
                .table-title {
                    &:first-child {
                        width: 15%;
                    }
                    width: 8.5%;
                    border-right: 1px #EEE solid;
                    font-size: 13px;
                    color: rgba(0, 0, 0, 0.85);
                    font-weight: 500;
                    text-align: center;
                    padding: 15px 0;
                    &:last-child {
                        border-right: none;
                    }
                }
            }

            .table-content-box {
                display: flex;
                align-items: center;
                border-top: 1px #EEE solid;
                width: 100%;
                &:hover {
                    background-color: rgba(186, 231, 255, .3);
                }
                .table-content {
                    &:first-child {
                        width: 15%;
                    }
                    width: 8.5%;
                    font-size: 12px;
                    padding: 10px 0;
                    text-align: center;
                    border-right: 1px #EEE solid;
                    &:nth-child(3) {
                        background-color: rgba(186, 231, 255, 1);
                    }
                    &:nth-child(4) {
                        background-color: rgba(186, 231, 255, .8);
                    }
                    &:nth-child(5) {
                        background-color: rgba(186, 231, 255, .6);
                    }
                    &:nth-child(6) {
                        background-color: rgba(186, 231, 255, .4);
                    }
                    &:nth-child(7) {
                        background-color: rgba(186, 231, 255, .35);
                    }
                    &:nth-child(8) {
                        background-color: rgba(186, 231, 255, .3);
                    }
                    &:nth-child(9) {
                        background-color: rgba(186, 231, 255, .25);
                    }
                    &:nth-child(10) {
                        background-color: rgba(186, 231, 255, .15);
                    }
                    &:nth-child(11) {
                        background-color: rgba(186, 231, 255, .1);
                        border-right: none;
                    }
                }
            }
        }
    }
</style>

<style lang="scss">
    .input-seclect {
        .el-select-dropdown__wrap {
            // height: 500px;
            max-height: 500px;
        }
    }
    .table-btn {
        cursor: pointer;
        color: #409EFF;
        font-size: 13px;
        font-weight: 500;
        &:hover {
            text-decoration: underline;
        }
    }
</style>
